<!DOCTYPE html>
<head>
<style type="text/css" id="cedu_style_element">
    div#control_div { position: absolute; top: 30px; left: 20px }
    div#vis_div { }
    div#table_div { }
    div#control_div * { font-size: small }
    .control_group { }
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="protovis-d3.2.js"></script>
<script type="text/javascript">
  if (!$.browser.mozilla)
    $('div#control_div').append("<p>I'm sorry, at this point the green machine relies on features of the Mozilla Firefox"
      + " web browser. In the future it will work with most web browsers.</p>");
  google.load('visualization', '1', {'packages':['table']});
  google.setOnLoadCallback(goNow);

  function goNow() {
      // Define a Google visualization datatable named itemtable.
      $(document.createElement('script')).attr('type', 'text/javascript').attr('src', 'district and state item datatable.js').appendTo('head');
      // Load and fire up the green machine.
      $(document.createElement('script')).attr('type', 'text/javascript').attr('src', 'greenmachine.js').appendTo('head');
      greenMachine(itemtable);
  }
</script>
</head>
<body>
    <div><!-- containing block for absolute positioning of #control_div -->
        <div id='control_div'>
            <table>
                <tr>
                    <td>Grade</td>
                    <td>
                        <select id="grade_select" onchange="redraw()">
                            <option selected>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>10</option>
                        </select>
                    </td>
                    <td>
                        <select id="subject_select" onchange="redraw()">
                            <option selected value="10">English</option>
                            <option value="20">Math</option>
                            <option value="30">Science</option>
                        </select>
                    </td>
                    <td>
                        <select id="year_select" onchange="redraw()">
                            <option>2002</option>
                            <option>2003</option>
                            <option>2004</option>
                            <option>2005</option>
                            <option>2006</option>
                            <option>2007</option>
                            <option>2008</option>
                            <option>2009</option>
                            <option selected>2010</option>
                        </select>
                    </td>
                </tr>
            </table>
            <table class="control_group">
                <tr>
                    <td>Sort</td>
                    <td>
                        <input type="radio" name="sort_order" value="standard" checked onchange="redraw()">in standard order<br/>
                        <input type="radio" name="sort_order" value="performance" onchange="redraw()">by performance<br/>
                    </td>
                </tr>
            </table>
            <table class="control_group">
                <tr>
                    <td>Include</td>
                    <td>
                        <input type="checkbox" name="include_types" value="Multiple-Choice" checked onchange="redraw()">multiple choice</input><br/>
                        <input type="checkbox" name="include_types" value="Short-Answer" checked onchange="redraw()">short answer</input><br/>
                        <input type="checkbox" name="include_types" value="Short-Response" checked onchange="redraw()">short response</input><br/>
                        <input type="checkbox" name="include_types" value="Open-Response" checked onchange="redraw()">open response</input><br/>
                    </td>
                </tr>
            </table>
            <table class="control_group">
                <tr>
                    <td><input type="checkbox" name="cf_state" value="cf_state" onchange="redraw(true)">compare state</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="subtract_state" value="subtract_state" onchange="redraw(true)">subtract state</td>
                </tr>
            </table>
        </div>
        <table>
            <tr>
                <td><div id='vis_div_left'></div></td>
                <td><div id='vis_div_right'></div></td>
            </tr>
        </table>
    </div>
</body>
